/**
* 左侧菜单栏
*/
<template>
  <el-menu :collapse="collapsed"
           :default-active="activeIndex"
           unique-opened class="el-menu-vertical-demo"
           background-color="#028370"
           text-color="#fff"
           active-text-color="#13C2C7"
  >
    <div class="logobox">
      <img class="logoimg" :src="hospitalImg" alt="">
    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 20px">
      <el-text style="font-size: 20px;color: white">COPD离院监测系统</el-text>
    </div>
    <el-scrollbar max-height="70vh">
      <el-sub-menu v-for="menu in filteredMenu" :key="menu.menuid" :index="menu.menuid">
        <template #title style="display: flex;align-items: center;justify-content: center">
          <font-awesome-icon style="width: 2vh;margin-right: 2vh;font-size: 20px" :icon="menu.icon"></font-awesome-icon>
          <span style="font-size: 16px">{{menu.menuname}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="chmenu in menu.menus"  :key="chmenu.menuid" :index="chmenu.menuid" @click="handleMenuClick(chmenu)">
            <font-awesome-icon style="width: 2vh;margin-right: 2vh;font-size: 18px" :icon="chmenu.icon"></font-awesome-icon>
            <span style="font-size: 14px">{{chmenu.menuname}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-scrollbar>
  </el-menu>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue';
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import hospitalImg from "../assets/img/logo1.png"
import { useAuthStore } from "@/stores/auth.js";
import router from "@/router/index.js";
import {leftNav} from "@/utils/leftNav.js";
const authStore = useAuthStore();
const appContext = getCurrentInstance().appContext;
const collapsed = ref(false);
const allmenu = ref([]);
const activeIndex = ref('')
const filteredMenu = computed(() => {
  const userRole = authStore.role;
  const filterByRole = (menu) => {
    if (menu.roles.includes(userRole)) {
      if (menu.menus) {
        menu.menus = menu.menus.filter(filterByRole);
      }
      return true;
    }
    return false;
  };
  return allmenu.value.filter(filterByRole);
});

onMounted(() => {
  let res = {
    success: true,
    data: leftNav,
    msg: 'success'
  }
  allmenu.value = res.data;
  // 监听
  appContext.config.globalProperties.$bus.on('toggle', value => {
    collapsed.value = !value
  })
})

const handleMenuClick = (menu) => {
  activeIndex.value = menu.menuid
  if (menu.menuname === '退出登录') {
    authStore.clearAuth();
    router.push('/login');
  } else if (menu.url) {
    router.push('/' + menu.url);
  }
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #409eff!important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 70px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 70px;
  width: 70px;
}
</style>